import axios from 'axios'

// 按需引入loading
import { Loading, Message } from 'element-ui'

// 导入需要的模块
import store from '@/store'
import router from '@/router'
// 配置全局请求根路径
// // 方式一：
// axios.defaults.baseURL = 'http://www.liulongbin.top:3008'
// // 导出
// export default axios

// 方式二：创建axios实例
const instance = axios.create({
  baseURL: 'http://www.liulongbin.top:3008'
})

// 每个函数都有独立的作用域 - 全局声明变量
let loading

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 函数中this的指向时有问题的，可以直接按需引入loading
  loading = Loading.service({
    lock: true, // loading期间禁止滑动滚动条
    text: '拼命加载中...', // loading显示的文本
    spinner: 'el-icon-loading', // loading时显示的图标
    background: 'rgba(0, 0, 0, 0.7)' // loading时的背景颜色
  })
  // config是每次发送请求的配置对象，headers是请求头对象
  // startsWith 检测字符串是否以某个字符开头 - 返回布尔值
  // endsWith 检测字符串是否以某个字符结尾 - 返回布尔值
  // includes 检测字符串是否包含某个字符
  // 优化：判断请求地址以什么开头，如果以 /my 开头，就配置请求头
  if (config.url.startsWith('/my')) {
    config.headers.Authorization = localStorage.getItem('bigEvent_token')
  }
  // console.log(config)
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 响应之后关闭loading - 不管成功与否
  loading.close()
  return response
}, function (error) {
  // 对响应错误做点什么
  // token过期之后 - 身份验证不通过 - 会报错401 - 此时需要提示用户token过期并且跳转到登录页
  // 要做双重判断 - 如果响应401并且code=1时，说明token过期
  const { data, status } = error.response
  if (data.code === 1 && status === 401) {
    // 1、提示用户token过期，要重新登陆
    // 手动导入模块 Message === this.$message
    Message.error('token过期，请重新登录')
    // 2、删除token
    localStorage.removeItem('bigEvent_token')
    // 3、删除用户信息
    // 手动导入的store === this.$store  手动导入的router === this.$router
    store.commit('user/setUserInfo', {})
    // 4、跳转到登录页
    router.push('/login')
  }
  // console.dir(error)
  // 关闭loading
  loading.close()
  return Promise.reject(error)
})

export default instance
